<template>
    <el-dialog
        top="15vh"
        v-model="dialogVisible"
        title="商品选择"
        width="80%"
        destroy-on-close
    >
    <el-container class="container" style="height:45vh;">
        <el-main class="main">
            <div>
                <el-table
                    id="goods-list-table" 
                    ref="multipleTableRef" 
                    @selection-change="handleSelectionChange" 
                    :data="tableData" 
                    style="width: 100%" 
                    stripe
                    lazy>
                        <el-table-column fixed="left" type="selection" width="55" />
                        <el-table-column label="商品" min-width="300">
                            <template #default="{ row }">
                                <div class="goods-style">
                                    <el-image class="goods-style-image" :src="row.cover" fit="cover"></el-image>
                                    <div class="goods-style-content">
                                        <span>{{row.title}}</span>
                                        <span class="content-category">分类：{{row.category ? row.category.name : '未分类'}}</span>
                                        <span class="content-create-time">创建时间：{{row.create_time}}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stock" align="center" width="90" label="总库存"/>
                        <el-table-column align="center" label=" 价格 (元)" width="150">
                        <template #default="{ row }">
                            <span style="color: #f43f5e">￥{{row.min_price}}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span style="color: #6b7280; font-size: 12px">￥{{row.min_oprice}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-main>
        <el-footer class="footer">
            <el-pagination 
                :currentPage="currentPage" 
                background 
                layout="prev, pager, next" 
                :page-size="limit" 
                :total="total" 
                @current-change="getData"></el-pagination>
        </el-footer>
    </el-container>
    <template #footer>
      <span>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import { useInitTable } from '~/composables/useCommon'
import { 
    getGoodsList
} from '~/api/goods'

// 初始化表格数据
const {
    // 搜索
    searchForm,
    resetSearchForm,
    // 表格
    multipleTableRef,
    // 分页
    currentPage,
    limit,
    total,
    // 表格数据
    tableData,
    // 获取数据方法
    getData,
    // 多选相关
    multipleSelection,
    multipleSelectionIds,
    handleSelectionChange,
} = useInitTable({
    // 搜索表单
    searchForm: {
        tab:"all",
        title:"",
        category_id:""
    },
    autoGetData:false,
    loading:"#goods-list-table",
    // 获取数据的方法
    getList:getGoodsList,
    // 获取数据成功之后的回调
    success:(res)=>{
        total.value = res.totalCount
        tableData.value = res.list.map(o=>{
            o.statusLoading = false
            return o
        })
    },
})

const dialogVisible = ref(false)
const callbackFunction = ref(false)
const open = (callback = false)=>{
    callbackFunction.value = callback
    dialogVisible.value = true
    nextTick(()=>getData())
}
const close = ()=>{
    dialogVisible.value = false
    callbackFunction.value = false
}

const submit = ()=>{
    if(typeof callbackFunction.value == "function") callbackFunction.value(multipleSelectionIds.value)
    close()
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.container {
    background: #fff;
    .main {
        position: relative;
        .goods-style {
            display: flex;
            .goods-style-image {
                margin-right: 12px;
                height: 50px;
                width: 50px;
            }
            .goods-style-content {
                display: flex;
                flex-direction: column;
                .content-category {
                    color: #9ca3af;
                    font-size: 12px;
                }
                .content-create-time {
                    color: #9ca3af;
                    font-size: 12px;
                }
            }
        }
    }
    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>